Ext.ns('journal.preference');

// {{{
journal.preference.SecurityForm = Ext.extend(Ext.form.FormPanel, (function() {
    var submitForm = function(form) {
        if (form.isValid()) {
            var el = Ext.get('info-msg');
            el.hide();
            form.submit({
                method : 'POST',
                waitTitle : 'Connecting',
                waitMsg : 'Applying changes...',
                success : function(form, action) {
                    var respObj = Ext.util.JSON.decode(action.response.responseText);
                    el.applyStyles('color: #00CC33');
                    el.update('INFO: Password successfully changed.');
                    el.show();
                },
                failure : function(form, action) {
                    var respObj = Ext.util.JSON.decode(action.response.responseText);
                    el.applyStyles('color: red');
                    el.update('ERROR: ' + respObj.errormsg);
                    el.show();
                }
            });
        }
    };

    return {
        // defaults - can be changed from outside
        border : false,
        frame : true,
        labelWidth : 80,
        constructor : function(config) {
            config = config || {};
            config.listeners = config.listeners || {};
            journal.preference.SecurityForm.superclass.constructor.call(this, config);
        },
        initComponent : function() {

            // hard coded - cannot be changed from outside
            var config = {
                url : 'home?action=changePassword',
                defaultType : 'textfield',
                autoWidth : true,
                monitorValid : true,
                autoScroll : true,
                labelWidth : 150,
                labelAlign : 'right',
                defaults : {
                    style : 'margin: 3px 0 0 0'
                },
                items : [ {
                    xtype : 'fieldset',
                    title : 'Change Password',
                    autoHeight : true,
                    defaults : {
                        width : 210
                    },
                    items : [ {
                        xtype : 'textfield',
                        fieldLabel : 'Username',
                        disabled : true,
                        value : this.user
                    }, {
                        xtype : 'textfield',
                        id : 'old-pwd',
                        fieldLabel : 'Old Password',
                        inputType : 'password',
                        validationEvent : false,
                        allowBlank : true,
                        autoCreate : {
                            tag : 'input',
                            type : 'password',
                            size : '20',
                            autocomplete : 'off',
                            maxlength : '16'
                        }
                    }, {
                        xtype : 'textfield',
                        id : 'new-pwd',
                        fieldLabel : 'New Password',
                        inputType : 'password',
                        allowBlank : true,

                        enableKeyEvents : true,
                        listeners : {
                            'blur' : function(thistextfield) {
                                this.ownerCt.get('renew-pwd').validate();
                            }
                        },
                        autoCreate : {
                            tag : 'input',
                            type : 'password',
                            size : '20',
                            autocomplete : 'off',
                            maxlength : '16'
                        }
                    }, {
                        xtype : 'textfield',
                        id : 'renew-pwd',
                        fieldLabel : 'Retype New Password',
                        inputType : 'password',
                        allowBlank : true,
                        autoCreate : {
                            tag : 'input',
                            type : 'password',
                            size : '20',
                            autocomplete : 'off',
                            maxlength : '16'
                        },
                        validator : function(val) {
                            if (this.ownerCt.get('new-pwd').getValue() == val) {
                                return true;
                            } else {
                                return 'New passwords must match';
                            }
                        },
                        validationDelay : 100
                    }, {
                        xtype : 'box',
                        id : 'info-msg',
                        itemCls : 'error-msg',
                        autoEl : {
                            tag : 'div'
                        }
                    } ]
                } ],
                buttons : [ {
                    text : 'Apply',
                    scope : this,
                    handler : function(btn, event) {
                        submitForm(btn.ownerCt.ownerCt.getForm());
                    }
                } ]
            }; // eo config object

            // apply config
            Ext.apply(this, Ext.apply(this.initialConfig, config));

            // call parent
            journal.preference.SecurityForm.superclass.initComponent.apply(this, arguments);

        }, // eo function initComponent

        /** Form override */
        onRender : function() {
            // call parent
            journal.preference.SecurityForm.superclass.onRender.apply(this, arguments);
            // set wait message target
            this.getForm().waitMsgTarget = this.getEl();
        } // eo function onRender

    }
})()); // eo extend

// register xtype
Ext.reg('journal.preference.SecurityForm', journal.preference.SecurityForm);